#header-nav {
  position: relative;
  z-index: 999;
  
  &.is_fixed {
    position: fixed;
    width: 100vw;
    left: 0;
    top: 0;
    z-index: 999;
    margin-top: 8px;
    .header-top {
      .content {
        box-shadow: 1px 1px 12px #0000001a;
      }
    }
  }
  .header-top {
    .content {
        padding: 0 22px;
        @media screen and (max-width: 767px) {
          padding: 0 15px;
        }
        box-sizing: border-box;
        background-color: var(--nav-bg);
        color: var(--menu-color);
    }
  }
  .nav-logo {
    a {
      font-family: var(--title_font_family);
      font-style: var(--title_font_style);
      letter-spacing: var(--title_letter_spacing);
    }

    .logo {
      font-size: 1.875rem;
      font-weight: bold;
      color: var(--menu-color);

      span {
        display: none;
        font-family: var(--title_font_family);
        font-style: var(--title_font_style);
        letter-spacing: var(--title_letter_spacing);
        @media screen and (min-width: 768px) {
          &.pc {
            display: flex;
            align-items: center;
          }
        }
        @media screen and (max-width: 767px) {
          &.yd {
            display: flex;
            align-items: center;
          }
        }
      }
    }
  }
}
